<template>
  <div id="centerRight1">
    <dv-scroll-board class="dv-scr-board" :config="config" />
  </div>
</template>

<script>
import { getEquipmentForesee } from "@/api/index";
export default {
  data() {
    return {
      config: {
        header: [this.$t('page2.rightBoxTable.header.faultName'), this.$t('page2.rightBoxTable.header.count'), this.$t('page2.rightBoxTable.header.percentage')],
        data: [],
        rowNum: 8, //表格行数
        headerHeight: 45,
        headerColor: "#84C0EE",
        headerBGC: "", //表头
        oddRowBGC: "#0A1B36", //奇数行
        evenRowBGC: "", //偶数行
        align: ["center", "center", "center"],
      },
    };
  },
  methods: {
    getrequests() {
      getEquipmentForesee().then((res) => {
        if (res.code == 200) {
          let data = [];
          res.data.forEach((item) => {
            data.push([
              item.equipmentFaultCause,
              item.equipmentFaultNum,
              item.percentage,
            ]);
          });

          this.config.data = data;
          this.config = { ...this.config };
        }
      });
    },
  },
  mounted() {
    setInterval(() => {
      this.getrequests();
    }, 3600000);
    this.getrequests();
  },
};
</script>

<style lang="scss" scoped>
::v-deep .dv-scroll-board {
  height: 38vh;
  .header {
    font-size: 16px;
    color: #85acef !important;
    text-align: center;
  }
  .rows {
    .row-item {
      color: #c6d9f8;
      font-size: 15px;
      .ceil:nth-child(3) {
        color: #25d4f3;
      }
    }
  }
}
</style>
